{% block sw_users_permissions_permissions_grid %}
<mt-card
    class="sw-users-permissions-permissions-grid"
    position-identifier="sw-users-permissions-permissions-grid"
    :title="$tc('sw-users-permissions.roles.grid.title')"
>
    <div class="sw-users-permissions-permissions-grid__grid">
        {% block sw_users_permissions_permissions_grid_header %}
        <div class="sw-users-permissions-permissions-grid__entry sw-users-permissions-permissions-grid__entry-header">
            {% block sw_users_permissions_permissions_grid_header_title %}
            <div class="sw-users-permissions-permissions-grid__title">
                {% block sw_users_permissions_permissions_grid_header_title_content %}
                {% endblock %}
            </div>
            {% endblock %}

            {% block sw_users_permissions_permissions_grid_header_roles %}
            <div
                v-for="role in roles"
                :key="role"
                class="sw-users-permissions-permissions-grid__checkbox-wrapper"
            >
                {% block sw_users_permissions_permissions_grid_header_roles_name %}
                {{ $tc('sw-privileges.roles.' + role) }}
                {% endblock %}
            </div>
            {% endblock %}

            {% block sw_users_permissions_permissions_grid_header_all_roles %}
            <div class="sw-users-permissions-permissions-grid__all">
                {% block sw_users_permissions_permissions_grid_header_all_roles_name %}
                {{ $tc('sw-privileges.roles.all') }}
                {% endblock %}
            </div>
            {% endblock %}
        </div>
        {% endblock %}

        {% block sw_users_permissions_permissions_grid_permissions %}
        <template
            v-for="permission in permissionsWithParents"
            :key="permission.value"
        >
            <div
                v-if="permission.type === 'parent'"
                :class="'sw-users-permissions-permissions-grid__parent_' + permission.value"
                class="sw-users-permissions-permissions-grid__entry
                                sw-users-permissions-permissions-grid__parent"
            >
                {% block sw_users_permissions_permissions_grid_parent_title %}
                <div class="sw-users-permissions-permissions-grid__title">
                    {% block sw_users_permissions_permissions_grid_parent_title_content %}
                    {{ $tc('sw-privileges.permissions.parents.' + (permission.value || 'other')) }}
                    {% endblock %}
                </div>
                {% endblock %}

                {% block sw_users_permissions_permissions_grid_parent_roles %}
                <div
                    v-for="role in roles"
                    :key="`${permission.value}-${role}`"
                    :class="'sw-users-permissions-permissions-grid__role_' + role"
                    class="sw-users-permissions-permissions-grid__checkbox-wrapper"
                >
                    {% block sw_users_permissions_permissions_grid_parent_roles_field %}
                    <mt-checkbox
                        v-if="parentRoleHasChildRoles(permission.value, role)"
                        :checked="areAllChildrenRolesSelected(permission.value, role)"
                        :partial="areSomeChildrenRolesSelected(permission.value, role)"
                        :disabled="isParentRoleDisabled(permission.value, role) || disabled"
                        @update:checked="toggleAllChildrenWithRole(permission.value, role)"
                    />
                    {% endblock %}
                </div>
                {% endblock %}

                {% block sw_users_permissions_permissions_grid_parent_all_roles %}
                <div class="sw-users-permissions-permissions-grid__all sw-users-permissions-permissions-grid__role_all">
                    {% block sw_users_permissions_permissions_grid_parent_all_roles_field %}
                    <mt-checkbox
                        :checked="areAllChildrenWithAllRolesSelected(permission.value)"
                        :partial="areSomeChildrenWithAllRolesSelected(permission.value)"
                        :disabled="disabled"
                        @update:checked="toggleAllChildrenWithAllRoles(permission.value)"
                    />
                    {% endblock %}
                </div>
                {% endblock %}
            </div>

            <div
                v-else
                :key="`else-${permission.key}`"
                :class="'sw-users-permissions-permissions-grid__entry_' + permission.key"
                class="sw-users-permissions-permissions-grid__entry"
            >
                {% block sw_users_permissions_permissions_grid_permissions_title %}
                <div class="sw-users-permissions-permissions-grid__title">
                    {% block sw_users_permissions_permissions_grid_permissions_title_content %}
                    {{ $tc('sw-privileges.permissions.' + permission.key + '.label') }}
                    {% endblock %}
                </div>
                {% endblock %}

                {% block sw_users_permissions_permissions_grid_permissions_roles %}
                <div
                    v-for="role in roles"
                    :key="`else-${permission.key}${role}`"
                    :class="'sw-users-permissions-permissions-grid__role_' + role"
                    class="sw-users-permissions-permissions-grid__checkbox-wrapper"
                >
                    {% block sw_users_permissions_permissions_grid_permissions_roles_field %}
                    <mt-checkbox
                        v-if="permission.roles[role]"
                        v-tooltip="{
                            message: $tc('sw-users-permissions.roles.grid.disabledCheckboxMessage'),
                            disabled: !isPermissionDisabled(permission.key, role) || disabled,
                            showOnDisabledElements: false
                        }"
                        :checked="isPermissionSelected(permission.key, role)"
                        :disabled="isPermissionDisabled(permission.key, role) || disabled"
                        @update:checked="changePermission(permission.key, role)"
                    />
                    {% endblock %}
                </div>
                {% endblock %}

                {% block sw_users_permissions_permissions_grid_permissions_all_roles %}
                <div class="sw-users-permissions-permissions-grid__all sw-users-permissions-permissions-grid__role_all">
                    {% block sw_users_permissions_permissions_grid_permissions_all_roles_field %}
                    <mt-checkbox
                        v-if="Object.keys(permission.roles).length > 0"
                        :checked="allPermissionsForKeySelected(permission.key)"
                        :disabled="disabled"
                        @update:checked="changeAllPermissionsForKey(permission.key)"
                    />
                    {% endblock %}
                </div>
                {% endblock %}
            </div>
        </template>
        {% endblock %}
    </div>
</mt-card>
{% endblock %}
